<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <title>登录注册</title>
</head>

<body>
    <div id="app">
        <div class="container d-flex vh-100 justify-content-center align-items-center">
            <router-view></router-view>
        </div>
    </div>
    <!-- 提取注册模板整个 -->
    <template id="registerPage">
        <cards>
            <template v-slot:header>
                <h3>欢迎注册</h3>
            </template>
            <cardform text="注册" @click="register"  key="registerkey"></cardform>
            <template v-slot:footer>
                <router-link to="/login" class="text-muted" v-on:click="userState=0">如果注册好请点击此处登录</router-link>
            </template>
        </cards>
    </template>
    <!-- 提取登录模板的整个 -->
    <template id="loginPage">
        <cards>
            <template v-slot:header>
                <h3>欢迎登录</h3>
            </template>
            <cardform text="登录" @click="login" key="loginkey"></cardform>
            <template v-slot:footer>
                <router-link to="/regist" class="text-muted" v-on:click="userState=-1">如你没有注册,请点击此处注册</router-link>
            </template>
        </cards>
    </template>
    <!-- 提取首页的模板 -->
    <template id="indexPage">
        <div class="d-flex vh-100 justify-content-center align-items-center">
            <h1>欢迎,{{user.username}}</h1>
            <div class="text-center">
                <router-link to="/login" class="text-muted" v-on:click="userState=0">点击此处退出</router-link>
            </div>
        </div>
    </template>
    <!-- 整个card模板组件 -->
    <template id="card">
        <div class="card border-0">
            <div class="card-header bg-white">
                <slot name="header"></slot>
            </div>
            <div class="card-body">
                <slot></slot>
            </div>
            <div class="card-footer bg-white">
                <slot name="footer"></slot>
            </div>
        </div>
    </template>
    <!--输入名称输入框组件 -->
    <template id="nameinput">
        <div class="form-group">
            <input type="text" class="form-control" :value="username" @input="$emit('input',$event.target.value)" />
        </div>
    </template>
    <!-- 密码的输入组件 -->
    <template id="passwordinput">
        <div class="form-group">
            <div class="input-group">
                <input :type="type" class="form-control" :value="password"
                    @input="$emit('input',$event.target.value)" />
                <div class="input-group-append">
                    <button type="button" class="btn btn-primary"
                        v-on:click="isShowPassword=!isShowPassword">{{buttonText}}</button>
                </div>
            </div>
        </div>
    </template>
    <!-- 提交的按钮组件 -->
    <template id="registerbtn">
        <div class="form-group">
            <button type="button" class="btn btn-primary btn-block" :disabled="disabled"
                @click="$emit('registermethod')">{{btntext}}</button>
        </div>
    </template>
    <template id="cardform">
        <form>
            <nameinput v-model="username"></nameinput>
            <passwordinput v-model="password" :key="key"></passwordinput>
            <registerbtn :btntext="text" @registermethod="$emit('click',username,password)"
                :disabled='isDisabledButton'></registerbtn>
        </form>
    </template>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        const user={username:'',password:''}
        //用户名组件
        Vue.component('nameinput', {
            model: {
                prop: "username",
                event: 'input'
            },
            props: {
                username: {
                    default: ''
                }
            },
            template: '#nameinput'
        })
        // 密码组件
        Vue.component('passwordinput', {
            model: {
                prop: "password",
                event: 'input'
            },
            props: {
                password: {
                    default: ''
                }
            },
            template: '#passwordinput',
            data: function () {
                return {
                    isShowPassword: false
                }
            },
            computed: {
                buttonText: function () {
                    return this.isShowPassword ? '隐藏' : '显示'
                },
                type: function () {
                    return this.isShowPassword ? 'text' : 'password'
                }
            },
        })
        //提交按钮组件
        Vue.component('registerbtn', {
            props: {
                btntext: {
                    default: '提交'
                },
                disabled: {
                    default: true
                }
            },
            template: '#registerbtn',

        })
        // card模板组件
        Vue.component('cards', {
            template: '#card',
        })

        Vue.component('cardform', {
            template: '#cardform',
            props: {
                text: {
                    default: '提交'
                },
                key: {
                    default: ''
                }
            },
            data: function () {
                return {
                    username: '',
                    password: ''
                }
            },
            computed: {
                isDisabledButton: function () {
                    return this.username.length == 0 || this.password.length == 0;
                }
            },
        })

        const registerPage = {
            template: '#registerPage',
            methods:{
                register(username, password) {
                    user.username = username
                    user.password = password
                    console.log("注册成功")
                    router.push({path:'/login'})
                },
            }
        }
        const loginPage = {
            template: '#loginPage',
            methods:{
                login(username, password) {
                    if (username ==user.username && password ==user.password) {
                        alert("登录成功");
                        router.push({path:'/index'})
                    } else {
                        alert("登录失败,请重新登录")
                    }
                }
            }
        }
        const indexPage = {
            template: '#indexPage',
            data:function(){
                return{
                    user:user
                }
            }
        }

        const router = new VueRouter({
            routes: [
                { path: '/regist', component: registerPage },
                { path: '/login', component: loginPage},
                { path: '/index', component: indexPage},
            ]
        })

        const app = new Vue({
            router,
            el: '#app',
        })
    </script>
</body>

</html>